<template>
    <div>
      <div class="bz">
        <span class="demonstration">日期</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="Start date"
          end-placeholder="End date"
          :size="size"
        />
        <el-button type="primary" round @click="search">查询</el-button>
        <div class="nnn">
          <el-button round>批量打印</el-button>
          <el-button type="primary" round @click="dialogFormVisible = true"
            >新增</el-button
          >
        </div>
      </div>
  
      <div class="biao">
        <vxe-table
          border
          show-overflow
          ref="xTable"
          :column-config="{ resizable: true }"
          :loading="loading"
          :data="tableData"
          :edit-config="{ trigger: 'manual', mode: 'row' }"
        >
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
  
          <vxe-column field="date12" title="填写日期" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input
                v-model="row.date12"
                type="date"
                placeholder="请选择日期"
                transfer
              ></vxe-input>
            </template>
          </vxe-column>
  
          <vxe-column field="name" title="时间" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" type="text"></vxe-input>
            </template>
          </vxe-column>
  
          <vxe-column field="role" title="数值" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input
                v-model="row.role"
                type="text"
                placeholder="请输入昵称"
              ></vxe-input>
            </template>
          </vxe-column>
  
          <vxe-column field="role" title="类型" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input
                v-model="row.role"
                type="text"
                placeholder="请输入昵称"
              ></vxe-input>
            </template>
          </vxe-column>
  
          <vxe-column field="role" title="签名" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input
                v-model="row.role"
                type="text"
                placeholder="请输入昵称"
              ></vxe-input>
            </template>
          </vxe-column>
  
          <vxe-column title="操作" width="160">
            <template #default="{ row }">
              <template v-if="isActiveStatus(row)">
                <vxe-button @click="saveRowEvent(row)">编辑</vxe-button>
                <vxe-button @click="cancelRowEvent(row)">删除</vxe-button>
              </template>
              <template v-else>
                <vxe-button @click="editRowEvent(row)">打印</vxe-button>
              </template>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
  
      <div class="zeng">
        <el-dialog v-model="dialogFormVisible" title="新增血糖类型" width="500">
          <el-form :model="form">
            <el-form-item label="日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="form.data"
                type="date"
                placeholder="选择日期"
                :size="size"
              />
            </el-form-item>
  
            <el-form-item label="时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="几点几分"
              />
            </el-form-item>
  
            <el-form-item label="数值" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
  
            <el-form-item label="类型" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false">
                保存
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </template>
  
  
  <script setup>
  import { reactive, ref } from "vue";
  
  const dialogTableVisible = ref(false);
  const dialogFormVisible = ref(false);
  const formLabelWidth = "140px";
  const form = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
  });
  
  const gridData = [
    {
      date: "2016-05-02",
      name: "John Smith",
      address: "No.1518,  Jinshajiang Road, Putuo District",
    },
    {
      date: "2016-05-04",
      name: "John Smith",
      address: "No.1518,  Jinshajiang Road, Putuo District",
    },
    {
      date: "2016-05-01",
      name: "John Smith",
      address: "No.1518,  Jinshajiang Road, Putuo District",
    },
    {
      date: "2016-05-03",
      name: "John Smith",
      address: "No.1518,  Jinshajiang Road, Putuo District",
    },
  ];
  </script>
  
  
  <style scoped>
  .head {
    width: 75%;
    height: 40px;
    margin: 0 auto;
  }
  .nav1 {
    width: 80%;
    height: 30px;
    margin: 20px auto;
    padding: 20px;
  }
  .mx-1 {
    font-size: 16px;
    margin: 100px;
  }
  
  .bz {
    width: 80%;
    margin: 0 auto;
    padding: 30px 0;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
  .biao {
    width: 80%;
    height: 800px;
    margin: 0 auto;
  }
  .nnn{
    float: right;
  }
  </style>